<template>
	<MkPanel title="站点菜单">
		<template #header>
			<div style="font-size: 1.2rem; display: flex; justify-content: space-between;">
				<div>站点菜单</div>
				<MkButtonAdd @click="add" v-if="false">新增</MkButtonAdd>
			</div>
		</template>
		<el-tree ref="treeRef" :data="tableData" node-key="id" show-checkbox default-expand-all highlight-current
			:expand-on-click-node="false" :props="{ children: 'children', label: 'menuTitle' }"
			style="width: 500px; overflow-y: auto;">
			<template #default="{ node, data }">
				<div class="custom-tree-node">
					<span>{{ node.label }}</span>
					<div>
						<el-button type="primary" link @click="append(data)" v-if="data.children">
							Append
						</el-button>
					</div>
				</div>
			</template>
		</el-tree>
		<EditPage ref="editRef" :title="state.editRoleTitle" @handleQuery="fetch" />
	</MkPanel>
</template>

<script lang="ts" setup name="basZhanDianMenu">
// 站点菜单管理
import { onMounted, reactive, ref } from 'vue';
import { BasEnum } from '/@/api/bas/basEnum';
import { BasZhanDianMenuApi, BasZhanDianMenuOutput, BasZhanDianMenuTreeOutput } from '/@/api/bas/BasZhanDianMenu';
import { useLoadingFetch } from '/@/hooks';
import EditPage from './edit.vue';
import { clog } from '/@/utils';

const editRef = ref<InstanceType<typeof EditPage>>();
const state = reactive({
	loading: false,
	editRoleTitle: '',
	zhanDian: [] as BasEnum[]
});

const { fetch, loading, result: tableData } = useLoadingFetch(BasZhanDianMenuApi.allTree);

onMounted(() => {
	fetch();
});

// 添加模块
const add = () => {
	editRef.value?.show({});
}

// 添加子菜单
const append = (node: BasZhanDianMenuTreeOutput) => {
	clog("append", node);
	editRef.value?.show(node);
}
</script>


<style lang="scss" scoped>
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
</style>
